<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="JingleChart -基于canvas开发的html5图表控件，移动端专属。极简的图表控件，简单的图形+合适的接口，打造交互丰富的图表">
    <meta name="author" content="walker.shixy">
    <title>JingleChart - 移动端专属。极简的图表控件，简单的图形+合适的接口，打造交互丰富的图表</title>
    <link href="http://v3.bootcss.com/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Documentation extras -->
    <link href="css/docs.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/highlight.js/7.3/styles/github.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/styles.css">
    <style>
        body {
            font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "WenQuanYi Micro Hei", sans-serif;
        }

        h1, .h1, h2, .h2, h3, .h3, h4, .h4, .lead {
            font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
        }
        pre code {
            background: transparent;
        }
        @media (min-width: 768px) {
            .bs-docs-home .bs-social,
            .bs-docs-home .bs-masthead-links {
                margin-left: 0;
            }
        }
        .bs-docs-section p {
            line-height: 2;
        }
        .bs-docs-section p.lead {
            line-height: 1.4;
        }
    </style>
</head>
<body class="bs-docs-home">
<a class="sr-only" href="#content">Skip to main content</a>
<!-- Docs master nav -->
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="index.html" class="navbar-brand">JChart</a>
        </div>
        <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
            <ul class="nav navbar-nav">
                <li>
                    <a href="api.html">开发文档</a>
                </li>
                <li>
                    <a href="samples.html">演示案例</a>
                </li>
                <li>
                    <a href="http://vycool.com/Jingle">Jingle UI</a>
                </li>
            </ul>
        </nav>
    </div>
</header>


<main class="bs-masthead" id="content" role="main">
    <div class="container">
        <h1>JChart<small>V0.1</small></h1>
        <p class="lead">
            Jingle Chart(JChart)是一个极为简单的图表，为移动端而生。
        </p>
        <div class="bs-callout bs-callout-danger">
            <h4>轻量级</h4>
            <p>体积轻量：不依赖任何js框架，体积min29k。</p>
            <p>图形轻量：干净的图表，没有标题，没有图例。移动端屏幕太小，放不下这么多东西，这些要放哪里，怎么展示，html可以帮到您。</p>
        </div>
        <div class="bs-callout bs-callout-warning">
            <h4>支持移动端的各种手势</h4>
            <p>触摸、长按、拖动等等各种手势(其他手势效果待开发... ^_^)</p>
        </div>
        <div class="bs-callout bs-callout-info">
            <h4>丰富的接口、事件</h4>
            <p>让你的图表动起来，看api吧....</p>
        </div>
        <div class="bs-callout bs-callout-info">
            <h4>开源免费</h4>
            <p>MIT. Enjoy it！！</p>
        </div>
        <div class="bs-callout bs-callout-danger" style="height: 30px;min-height: 100px;">
            <p>JChart 才刚开始开发，还非常不完善，正努力开发中...</p>
            <p>感谢您的关注！</p>
        </div>
        <p>
            <a href="https://github.com/shixy/JChart/zipball/master" class="btn btn-outline-inverse btn-lg">下载JChart</a>
            <a href="https://github.com/shixy/JChart" target="_blank" class="btn btn-outline-inverse btn-lg">Github</a>
        </p>
    </div>
    <div class="row">
        <div class="col-md-6">
            <a href="" style="display: block;text-align: center">
                <img src="screenshots/line.jpg" width="80%">
            </a>
        </div>
        <div class="col-md-6">
            <a href="" style="display: block;text-align: center">
                <img src="screenshots/bar.jpg" width="80%">
            </a>
        </div>
    </div>
    <div class="row" style="margin-top: 10px;">
        <div class="col-md-6">
            <a href="" style="display: block;text-align: center">
                <img src="screenshots/pie.jpg" width="80%">
            </a>
        </div>
        <div class="col-md-6">
            <a href="" style="display: block;text-align: center">
                <img src="screenshots/polar.jpg" width="80%">
            </a>
        </div>
    </div>
</main>

<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/highlight.min.js"></script>
<script src="js/application.js"></script>
</body>
</html>